ul, li{
	padding: 0;
	margin: 0;
	list-style: none;
}
p{
	width: 90%;
	display: block;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: -150px;
	z-index:2;/* for mozilla */
	
	font: 180px "Dear Joe Italic";	
	text-align: center;
	text-shadow: 2px 2px 15px white;
	
	-webkit-transform: translateZ(500px);
	-moz-transform: translateZ(150px);
	-o-transform: translateZ(150px);
	-ms-transform: translateZ(150px);
	transform: translateZ(500px);
	
	-webkit-animation-name: colorTxt;
	-webkit-animation-duration: 4s;
	-moz-animation-name: colorTxt;
	-moz-animation-duration: 4s;
}
@font-face {
	font-family: Dear Joe Italic;
	src: url('dearjoe.ttf');
}
@-webkit-keyframes colorTxt{
	0%{
		color: #F00;
	}
	75%{
		color: #F00;
	}
	100%{
		color: black;
	}
}
@-moz-keyframes colorTxt{
	0%{
		color: #F00;
	}
	75%{
		color: #F00;
	}
	100%{
		color: black;
	}
}

		
.space{
	width: 300px;
	margin: 200px auto;
	
	-webkit-perspective: 700;
	-webkit-perspective-origin: 50% 100px;
}
.cube{
	width: 300px;
	height: 300px;
	position: relative;
	margin: 0 auto;
	
	-webkit-transform-style: preserve-3d;	
	-webkit-transform: rotateY(-40deg) rotateX(-40deg) rotateZ(20deg);
	-moz-transform: rotateY(-40deg) rotateX(-40deg) rotateZ(20deg);
	-o-transform: rotateY(-40deg) rotateX(-40deg) rotateZ(20deg);
	-ms-transform: rotateY(-40deg) rotateX(-40deg) rotateZ(20deg);
	transform: rotateY(-40deg) rotateX(-40deg) rotateZ(20deg);
	
}
.side{
	width: 300px;
	height: 300px;
	position: absolute;
		
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
}
	/*****	SITES	*****/
	.cube .one{
		-webkit-transform: translateZ(150px);
		-moz-transform: translateZ(150px);
		-o-transform: translateZ(150px);
		-ms-transform: translateZ(150px);
		transform: translateZ(150px);
	}
	.cube .two{
		-webkit-transform: rotateY(90deg) translateZ(150px);
		-moz-transform: rotateY(90deg) translateZ(150px);
		-o-transform: rotateY(90deg) translateZ(150px);
		-ms-transform: rotateY(90deg) translateZ(150px);
		transform: rotateY(90deg) translateZ(150px);
	}
	.cube .three{
		-webkit-transform: rotateY(180deg) translateZ(150px);
		-moz-transform: rotateY(180deg) translateZ(150px);
		-o-transform: rotateY(180deg) translateZ(150px);
		-ms-transform: rotateY(180deg) translateZ(150px);
		transform: rotateY(180deg) translateZ(150px);
		
	}
	.cube .four{
		-webkit-transform: rotateY(-90deg) translateZ(150px);
		-moz-transform: rotateY(-90deg) translateZ(150px);
		-o-transform: rotateY(-90deg) translateZ(150px);
		-ms-transform: rotateY(-90deg) translateZ(150px);
		transform: rotateY(-90deg) translateZ(150px);
	}
	.cube .five{
		-webkit-transform: rotateX(90deg) translateZ(150px);
		-moz-transform: rotateX(90deg) translateZ(150px);
		-o-transform: rotateX(90deg) translateZ(150px);
		-ms-transform: rotateX(90deg) translateZ(150px);
		transform: rotateX(90deg) translateZ(150px);
	}
	.cube .six{
		-webkit-transform: rotateX(-90deg) translateZ(150px);
		-moz-transform: rotateX(-90deg) translateZ(150px);
		-o-transform: rotateX(-90deg) translateZ(150px);
		-ms-transform: rotateX(-90deg) translateZ(150px);
		transform: rotateX(-90deg) translateZ(150px);
	}
		/*****	colors	*****/
		.side li{
			width: 100px;
			height: 100px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			float: left;
			
			border: 7px outset #252525;
			border-radius: 7px;
		}
		.side ul .col1{
			background-color: #FFF;
		}
		.side ul .col2{
			background-color: #FF0;
		}
		.side ul .col3{
			background-color: #F70;
		}
		.side ul .col4{
			background-color: #F00;
		}
		.side ul .col5{
			background-color: #0F0;
		}
		.side ul .col6{
			background-color: #0048FF;
		}

/**********************************
			ANIMATION - ROTATE
**********************************/
.cube:hover{
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	
	-moz-animation-name: rotate;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
}
@-webkit-keyframes rotate{
	30%{
		-webkit-transform: rotateX(100deg) rotateY(-140deg); 
	}
	60%{
		-webkit-transform: rotateX(350deg) rotateY(-140deg) rotateZ(160deg); 
	}
	100%{
		-webkit-transform: rotateX(180deg) rotateY(430deg) rotateZ(40deg);
	}
}
@-moz-keyframes rotate{
	30%{
		-moz-transform: rotateX(100deg) rotateY(-140deg); 
	}
	60%{
		-moz-transform: rotateX(350deg) rotateY(-140deg) rotateZ(160deg); 
	}
	100%{
		-moz-transform: rotateX(180deg) rotateY(430deg) rotateZ(40deg);
	}
}
/**********************************
			ANIMATION - COLORS
**********************************/

/*****	1. COLOR	*****/
.cube .side ul .col1{
			-webkit-animation-name: color1;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
			
			-moz-animation-name: color1;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color1{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(0,0%,100%,1);
	}
}
@-moz-keyframes color1{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(0,0%,100%,1);
	}
}


/*****	2. COLOR	*****/
.cube .side ul .col2{
			-webkit-animation-name: color2;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
			
			-moz-animation-name: color2;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color2{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(60%,100%,100%,1);
	}
}
@-moz-keyframes color2{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(60%,100%,100%,1);
	}
}

/*****	3. COLOR	*****/
.cube .side ul .col3{
			-webkit-animation-name: color3;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
					
			-moz-animation-name: color3;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color3{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(28%,100%,100%,1);
	}
}
@-moz-keyframes color3{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(28%,100%,100%,1);
	}
}

/*****	4. COLOR	*****/
.cube .side ul .col4{
			-webkit-animation-name: color4;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
			
			-moz-animation-name: color4;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color4{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(0,100%,50%,1);
	}
}
@-moz-keyframes color4{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(0,100%,50%,1);
	}
}

/*****	5. COLOR	*****/
.cube .side ul .col5{
			-webkit-animation-name: color5;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
			
			-moz-animation-name: color5;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color5{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(120,100%,50%,1);
	}
}
@-moz-keyframes color5{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(120,100%,50%,1);
	}
}

/*****	6. COLOR	*****/
.cube .side ul .col6{
			-webkit-animation-name: color6;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
						
			-moz-animation-name: color6;
			-moz-animation-duration: 4s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: 1;
			-moz-animation-direction: normal;
		}
@-webkit-keyframes color6{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(223,100%,50%,1);
	}
}
@-moz-keyframes color6{
	0%{
		background-color: hsla(0,0%,70%,0.3);
	}
	50%{
		background-color: hsla(0,0%,70%,0.3);
	}
	85%{
		background-color: hsla(0,0%,70%,1);
	}
	100%{
		background-color: hsla(223,100%,50%,1);
	}
}

